<template>
  <b-page class="khgl-edit">
    <div class="belong-user-name-wrap">
      <div class="belong-user-name-content"><span class="belong-user-name-title">所属成员</span>当前所属成员为：<span
        class="belong-user-name">{{ selectFollow.name?selectFollow.name:'当前客户没有人维护' }}</span></div>
      <div>
        <a-tag
          v-for="(item,index) in followUserList"
          :key="index"
          :color="item.userId===selectFollow.userId?'red':''"
          @click="selectUser(item)">
          <a-icon type="user"/>
          {{ item.name }}
        </a-tag>
      </div>
    </div>
    <div class="custom-user-data">
      <div class="d-jcs mt-12">
        <div class="custom-user-base-data data-left">
          <div class="data-title">基本信息</div>
          <div class="d-aic">
            <img class="custom-user-avatar" :src="record.headImgUrl">
            <span class="custom-user-name">{{ record.nickname }}</span>
            <span class="custom-user-sex"> {{ !record.sex?'未知':record.sex===1?'男':'女' }}</span>
          </div>
          <div class="d-jcs-aic custom-user-state">
            <div class="state-item">添加时间：{{ getTime(record.addTIme) }}</div>
            <div class="state-item">流失状态： {{ !record.leaveStatus?'未流失':record.sex===1?'被动删除':'主动删除' }}</div>
            <div class="state-item">添加渠道：{{ record.channelName }}</div>
          </div>
        </div>
        <div class="custom-user-chat data-right">
          <div class="data-title">所属群聊</div>
          <div class="chat-list-wrap">
            <a-tag color="red" v-for="(item,index) in chatList" :key="index">
              <a-icon type="user"></a-icon>
              {{ record.staffUserName +item }}
            </a-tag>
          </div>
        </div>
      </div>
      <div class="d-jcs mt-12">
        <div class="custom-user-base-data data-left">
          <div class="data-title">客户动态</div>
          <div style="padding-left:50px ">
            <a-timeline>
              <a-timeline-item color="#de1f26">
                <div class="time-line-add-icon-wrap d-jcc-aic" @click="addCustomerDynamic">
                  <a-icon class="time-line-add-icon" type="plus"/>
                </div>
              </a-timeline-item>
              <a-timeline-item color="green" v-for="(item,index) in customerDynamic" :key="index">
                <div style="position: absolute;left:-70px;top:0;">
                  <div class="time-line-left">{{ getYear(item.followTime) }}</div>
                  <div class="time-line-left">{{ getHour(item.followTime) }}</div>
                </div>
                <div class="">
                  <div class="d-aic">
                    <div class="time-life-cycle">{{ getLifeCycleName(item.lifeCycleId) }}</div>
                    <div class="time-communication">{{ item.communication }}</div>
                  </div>
                  <div class="time-followContent"> {{ item.followContent }}</div>
                </div>
              </a-timeline-item>
              <a-timeline-item color="green">
                <div class="d-aic">
                  <a-tag color="red" style="padding: 3px 14px">
                    <a-icon type="user"></a-icon>
                    {{ record.staffUserName }}
                  </a-tag>
                  <div class="time-line-tip">添加企业客户</div>
                  <a-tag color="red" style="padding: 3px 14px">
                    <img class="time-line-avatar" :src="record.headImgUrl">
                    {{ record.nickname }}
                  </a-tag>
                </div>
              </a-timeline-item>
            </a-timeline>
          </div>
        </div>
        <div class="custom-user-tag data-right">
          <div class="data-title">客户标签</div>
          <div class="custom-user-tag-content">
            <b-button
              type="default"
              ghost="default"
              prefix-icon="plus"
              btn-content="添加"
              class="mr-10"
              @click="updateTag=true"/>
            <a-tag style="padding: 3px 14px" v-for="(item,index) in tagList" :key="index">{{ item }}</a-tag>
          </div>
        </div>
      </div>
    </div>
    <a-modal
      v-model="CustomerDynamicShow"
      :title="null"
      width="640px"
      @ok="saveCustomer"
      @cancel="CustomerDynamicShow=false">
      <div class="modal-class-title">
        新增客户动态
      </div>
      <div class="modal-class-content">
        <a-form layout="inline" :labelCol="labelCol" labelAlign="left">
          <a-form-item label="沟通方式" class="d-aic">
            <a-radio-group v-model="communication" @change="communicationChange">
              <a-radio value="电话">
                电话
              </a-radio>
              <a-radio value="面聊">
                面聊
              </a-radio>
              <a-radio value="微信">
                微信
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="客户状态" class="d-aic mt-12">
            <a-radio-group v-model="lifeCycleId" @change="liftCycleChange">
              <a-radio :value="item.id" v-for="item in LifeCycleList" :key="item.id">
                {{ item.stage }}
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="跟进内容" class="d-aic mt-12">
            <a-textarea
              v-model="followContent"
              style="width: 450px"
              placeholder="请输入跟进内容"
              :auto-size="{ minRows: 5, maxRows: 5 }"
            />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <a-modal v-model="updateTag" :title="null" :footer="null" width="640px">
      <div class="modal-class-title">
        打标签
      </div>
      <div class="tag-update-wrap">
        <div class="d-aic">
          <b-data-title title="已选中："/>
          <span>{{ record.nickname }}，</span>
          1个客户,请选择标签
        </div>
        <div class="mt-30">
          <b-data-title title="标签组："/>
          <div class="d-aic tag-group-content mt-10" v-for="item in TagGroupList" :key="item.groupId">
            <div class="tag-group-name">{{ item.groupName }}</div>
            <div class="tag-group-main">
              <b-button
                prefix-icon="plus"
                @click="addTag(item)"
                class="add-tag-btn"
                ghost="default"
                type="default"
                btn-content="添加"/>
              <a-tag
                v-for="(tag,index) in item.tagList"
                class="tag-item"
                :color="tag.select?'blue':''"
                :key="index"
                @click="batchAddTag(tag)">{{ tag.name }}
              </a-tag>
            </div>
          </div>
        </div>
      </div>
      <div class="d-jcs-aic mt-30">
        <a-button type="link" icon="plus-circle" style="padding: 0" @click="addTag()">新建标签组</a-button>
        <div>
          <b-button
            ghost="default"
            type="default"
            @click="hide"
            btnContent="取消">
            取消
          </b-button>
          <b-button
            type="primary"
            style="margin-left: 10px"
            @click="saveCustomerTag"
            btnContent="确定"/>
        </div>
      </div>
    </a-modal>
    <tag-modal ref="tagModal" @saveTag="saveTag"/>
  </b-page>
</template>

<script>
  import API from '../../../../api/customer'
  import BButton from '../../../components/b-button'
  import TagModal from '../tag/tagModal'
  import TAG_API from '../../../../api/tag'

  export default {
    name: 'KhglEdit',
    components: { TagModal, BButton },
    props: {
        customerId: {
        type: [Number, String],
        default: null
      }
    },
    data () {
      return {
        labelCol: { lg: { span: 4 }, sm: { span: 4 } },
        wrapperCol: {
          xs: { span: 20 }
        },
        record: {}, // 客户基本信息
        customerDynamic: [], // 客户动态
        LifeCycleList: [], // 客户生命周期
        CustomerDynamicShow: false, // 添加客户动态弹窗
        chatList: [],
        communication: null,
        lifeCycleId: null,
        followContent: null,
        updateTag: false,
        TagGroupList: [],
        followUserList: [],
        selectFollow: {},
        tagList: []
      }
    },
    computed: {
      qwUserId () {
        return this.$store.state.user.info.qwUserId
      }
    },
    mounted () {
      this.getData()
      this.getTagList()
    },
    methods: {
      selectUser (item) {
        this.selectFollow = item
        this.getCustomerLifeCycleLogList()
      },
      getTagList () {
        TAG_API.list({ qwUserId: this.qwUserId }).then(res => {
          this.TagGroupList = res
          if (!this.TagGroupList.length) {
            return
          }
          this.initSelect()
          this.initSelectTag()
        })
      },
      initSelect () {
        this.TagGroupList.forEach(item => {
          item.tagList.forEach(tag => {
            this.$set(tag, 'select', false)
          })
        })
      },
      hide () {
        this.updateTag = false
        this.initSelect()
      },
      getData () {
        // 加载客户动态的时候，所属成员和生命周期都需要加载完成
        let isLoad = 0
        API.followUserList({ customerId: this.customerId, qwUserId: this.qwUserId }).then(res => {
          this.followUserList = res
          if (res.length) {
            this.selectFollow = res[0]
            isLoad += 1
          }
          if (isLoad === 2) {
            this.getCustomerLifeCycleLogList()
          }
        })
        // 获取基本信息
        API.getCustomerInfo({ customerId: this.customerId, qwUserId: this.qwUserId }).then(res => {
          this.record = res
          if (res.tag) {
            this.tagList = res.tag.split(',')
          }
          this.initSelectTag()
        })
        // 获取周期列表
        API.LifeCycleList({ qwUserId: this.qwUserId }).then(LifeCycleList => {
          this.LifeCycleList = LifeCycleList
          isLoad += 1
          if (isLoad === 2) {
            this.getCustomerLifeCycleLogList()
          }
        })
      },
      initSelectTag () {
        // 如果标签列表或者客户数据没有加载完或者为空都不执行
        if (!this.TagGroupList.length || !this.tagList.length) {
          return
        }
        this.TagGroupList.forEach(item => {
          item.tagList.forEach(tag => {
            this.tagList.forEach(selectTag => {
              if (tag.name === selectTag) {
                tag.select = true
              }
            })
          })
        })
      },
      getCustomerLifeCycleLogList () {
        // 获取客户动态
        API.customerLifeCycleLogList({
          customerId: this.customerId,
          qwUserId: this.qwUserId,
          userId: this.selectFollow.userId
        }).then(res => {
          this.customerDynamic = res
        })
      },
      getLifeCycleName (id) {
        try {
          return this.LifeCycleList.filter(item => item.id === id)[0].stage
        } catch (e) {
          return ''
        }
      },
      getYear (time) {
        return time ? this.$Utils.getTimeFormat(time).substring(5, 10) : ''
      },
      getHour (time) {
        return time ? this.$Utils.getTimeFormat(time).substring(11, 16) : ''
      },
      getTime (time) {
        return time ? this.$Utils.getTimeFormat(time).substring(0, 16) : ''
      },
      addCustomerDynamic () {
        this.CustomerDynamicShow = true
      },
      communicationChange (e) {
        this.communication = e.target.value
      },
      liftCycleChange (e) {
        this.lifeCycleId = e.target.value
      },
      saveCustomer () {
        if (!this.communication) {
          this.$message.error(`沟通方式不能为空`)
          return
        }
        if (!this.lifeCycleId) {
          this.$message.error(`客户状态不能为空`)
          return
        }
        if (!this.followContent) {
          this.$message.error(`跟进内容不能为空`)
          return
        }
        const params = {
          qwUserId: this.qwUserId,
          userId: this.record.staffUserId,
          customerId: this.record.id,
          communication: this.communication,
          lifeCycleId: this.lifeCycleId,
          followContent: this.followContent
        }
        API.addLifeCycleLog(params).then(res => {
          this.$message.success(`添加成功`)
          this.customerDynamic.push(res)
          this.CustomerDynamicShow = false
        }).catch(() => {
        })
      },
      addTag (item = {
        groupId: null,
        groupName: '',
        tagList: [{ name: '' }]
      }) {
        this.$refs.tagModal.show(item)
      },
      saveCustomerTag () {
        const tagList = []
        const customerIdList = [this.record.id]
        this.TagGroupList.forEach(item => {
          item.tagList.forEach(tag => {
            if (tag.select) {
              tagList.push(tag.name)
            }
          })
        })
        if (!tagList.length) {
          this.$message.warning(`请先选择标签`)
          return
        }
        API.makeTag({
          qwUserId: this.qwUserId,
          customerIds: customerIdList.join(','),
          tags: tagList.join(',')
        }).then(res => {
          this.updateTag = false
          this.getData()
          this.initSelect()
          this.$message.success(`操作成功`)
        })
      },
      batchAddTag (tag) {
        tag.select = !tag.select
      },
      saveTag () {
        this.getTagList()
      }
    }
  }
</script>

<style scoped lang="less">
  .add-tag-btn {
    height: 32px;
    margin-right: 20px;

    &.active {
      border: 1px solid #ff5f5f;
    }
  }

  .tag-group-name {
    min-width: 80px;
  }

  .khgl-edit {
    min-height: 100%;
    min-width: 900px;
    display: flex;
    flex-direction: column;
    background: #f6f8f9;

    .belong-user-name-wrap {
      background-color: #fff;
      min-height: 116px;

      .belong-user-name-content {
        margin-bottom: 15px;
        font-size: 12px;
        color: #101010;
      }

      .belong-user-name-title {
        margin-right: 20px;
        font-size: 16px;
        font-weight: 600;
      }

      .belong-user-name {
        margin-left: 10px;
        color: #f5222d;
      }
    }

    .data-title {
      margin-bottom: 15px;
      font-size: 16px;
      color: #101010;
      font-weight: 600;
    }

    .custom-user-data {
      font-size: 18px;

      .custom-user-base-data {
      }

      .custom-user-avatar {
        width: 70px;
        height: 70px;
      }

      .custom-user-name {
        margin-left: 20px;
        color: #101010;
      }

      .custom-user-sex {
        margin-left: 10px;
        color: #888;
      }

      .data-left {
        padding: 24px;
        width: 65%;
        min-height: 210px;
        background: white;
      }

      .data-right {
        padding: 24px;
        width: 34%;
        min-height: 210px;
        background: white;
      }

      .state-item {
        width: 33%;
      }

      .custom-user-state {
        margin-top: 24px;
        font-size: 14px;
        color: #101010;
      }
    }

    .mt-12 {
      margin-top: 12px
    }

    .time-line-left {
      width: 35px;
      text-align: right;
      font-size: 12px;
      color: #9f9f9f;
    }

    .time-communication {
      margin-left: 10px;
      display: inline-block;
      padding: 0 6px;
      height: 22px !important;
      text-align: center;
      line-height: 20px;
      border-radius: 2px;
      font-size: 12px;
      color: #52C41A;
      border: 1px solid #52C41A;
    }

    .time-life-cycle {
      display: inline-block;
      padding: 0 6px;
      height: 22px !important;
      text-align: center;
      line-height: 20px;
      border-radius: 2px;
      font-size: 12px;
      color: #ff5f5f;
      border: 1px solid #ff5f5f;
    }

    .time-followContent {
      margin-top: 10px;
      font-size: 14px;
      color: #9f9f9f;
    }

    .time-line-avatar {
      width: 20px;
      height: 20px;
    }

    .time-line-tip {
      margin: 0 10px;
      font-size: 14px;
      color: #9f9f9f;
    }

    .time-line-add-icon {
      font-size: 20px;
      color: white;
    }

    .time-line-add-icon-wrap {
      width: 30px;
      height: 30px;
      background: #ff5f5f;
      border-radius: 50%;
      cursor: pointer;
    }
  }

  .modal-class-title {
    text-align: center;
  }

  .mt-12 {
    margin-top: 12px;
  }
</style>
